
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    FONT_HEIGHT = 15, //字体的高度
    MARGIN = 35, //距离
    HAND_TRUNCATION = canvas.width/25,
    HOUR_HAND_TRUNCATION = canvas.width/10,
    NUMERAL_SPACING = 20,
    RADIUS = canvas.width/2 - MARGIN, //时钟的半径
    HAND_RADIUS = RADIUS + NUMERAL_SPACING;//文字离圆心的半径

// Functions.....................................................
/**
 * 绘制圆形
 */
function drawCircle() {

    context.beginPath();//beginPath() 方法开始一条路径，或重置当前的路径。

    context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI*2, true);
    //arc() 方法创建弧/曲线（用于创建圆或部分圆） 参数依次为（1）圆中心的X坐标（2）圆中心的Y坐标（3）半径（4）起始角，以弧度计（5）结束角 以弧度计（5）可选。false = 顺时针 true = 逆时针

    context.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
}
/**
 * 绘制圆盘周围的数字
 */
function drawNumerals() {
    var numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
        angle = 0,//弧度值
        numeralWidth = 0;//文字的宽

    numerals.forEach(function(numeral) {
        angle = Math.PI/6 * (numeral-3);//计算弧度值，想想为什么减3，高中知识吧 哈哈
        numeralWidth = context.measureText(numeral).width;// measureText(numeral) 测量numeral的文本长度
        context.fillText(numeral,
            canvas.width/2  + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,
            canvas.height/2 + Math.sin(angle)*(HAND_RADIUS) + FONT_HEIGHT/3); //填充文本
    });
}
/*
 绘制中心点
 */
function drawCenter() {
    context.beginPath();
    context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
    context.fill();//fill() 方法填充当前的图像（路径）。默认颜色是黑色。
}

/**
 * 绘制表针
 * @param loc
 * @param isHour
 */
function drawHand(loc, isHour) {
    var angle = (Math.PI*2) * (loc/60) - Math.PI/2,
        handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION //时针长度
            : RADIUS - HAND_TRUNCATION;//分针 秒针长度

    context.moveTo(canvas.width/2, canvas.height/2);//把路径移动到画布中的指定点，不创建线条
    context.lineTo(canvas.width/2  + Math.cos(angle)*handRadius,
        canvas.height/2 + Math.sin(angle)*handRadius);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
    context.stroke();
}

function drawHands() {
    var date = new Date,
        hour = date.getHours();
    hour = hour > 12 ? hour - 12 : hour;
    drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);//计算时间和当前在圆上面的弧度算法 然后在进行绘制出来 5 = 60 / 12 （换算成和 分针 秒针一致）
    drawHand(date.getMinutes(), false, 0.5);
    drawHand(date.getSeconds(), false, 0.2);
}

function drawClock() {
    context.clearRect(0,0,canvas.width,canvas.height); //绘制之前先清除先当前矩形

    drawCircle();
    drawCenter();
    drawHands();
    drawNumerals();
}

// Initialization................................................

context.font = FONT_HEIGHT + 'px Arial'; //字体大小
loop = setInterval(drawClock, 1000);
